<template>
    <div>
        <!-- 导航 -->
        <van-nav-bar title="美食资讯" left-text="" left-arrow @click="$router.push('/home/shop')">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>

        <div class="more">已经为您查询到更多美食资讯！</div>

        <!-- <van-nav-bar :title="topics.title" left-text="" left-arrow @click="$router.push('/home/shop')">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar> -->

        <!-- 内容 -->
        <van-card v-for="item in topicx" :key="item.id" @click="$router.push({ path: '/details', query: { id: item.id } })" :num="item.numlpl"
            :desc="item.textly" :title="item.title" :thumb="item.imagesone">
            <template #tags>
                <van-tag plain type="primary">{{ item.textx }}</van-tag>
                <van-tag plain type="primary">{{ item.numpf }}.0评分</van-tag><br><br>
                <span>点击量{{ item.numdjl }}</span>
            </template>
        </van-card>

    </div>
</template>

<script setup>
import myaxios from "@/http/MyAxios";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const id = ref(route.query.id);

const topics = ref();
onMounted(() => {
    let url = "http://127.0.0.1:5000/topic";
    myaxios.get(url).then((res) => {
        console.log("资讯导航栏结果", res);
        topics.value = res.data.data
    });
});

const topicx = ref();
onMounted(() => {
    let url = "http://127.0.0.1:5000/topic/topicx?id=" + id.value;
    myaxios.get(url).then((res) => {
        console.log("资讯列表结果", res);
        topicx.value = res.data.data
    });
});
</script>

<style scoped>
.van-card {
    /* --van-card-price-color:red;  */
    --van-card-price-font-size: 22px;
}
</style>